<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  

  
  <title>Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/page/10/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="default">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-CSS额外知识点-选择器（下）" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/07/15/CSS额外知识点-选择器（下）/" class="article-date">
  <time datetime="2019-07-15T06:54:08.000Z" itemprop="datePublished">2019-07-15</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/07/15/CSS额外知识点-选择器（下）/">CSS额外知识点--选择器（下）</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/07/15/CSS额外知识点-选择器（下）/" data-id="ck4r400oe001yl0w01jyaieyv" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-CSS额外知识点-选择器（上）" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/07/14/CSS额外知识点-选择器（上）/" class="article-date">
  <time datetime="2019-07-14T10:14:46.000Z" itemprop="datePublished">2019-07-14</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/07/14/CSS额外知识点-选择器（上）/">CSS额外知识点--选择器（上）</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h2><p>在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。</p>
<p>在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示：</p>
<p><img src="http://img.mukewang.com/56653eba0001b07004610215.jpg" alt></p>
<h3 id="实例展示："><a href="#实例展示：" class="headerlink" title="实例展示："></a>实例展示：</h3><p>html代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;a href=&quot;xxx.pdf&quot;&gt;我链接的是PDF文件&lt;/a&gt;</span><br><span class="line">&lt;a href=&quot;#&quot; class=&quot;icon&quot;&gt;我类名是icon&lt;/a&gt;</span><br><span class="line">&lt;a href=&quot;#&quot; title=&quot;我的title是more&quot;&gt;我的title是more&lt;/a&gt;</span><br></pre></td></tr></table></figure>

<p>css代码  </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">a[class^=icon]&#123;</span><br><span class="line">  background: green;</span><br><span class="line">  color:#fff;</span><br><span class="line">&#125;</span><br><span class="line">a[href$=pdf]&#123;</span><br><span class="line">  background: orange;</span><br><span class="line">  color: #fff;</span><br><span class="line">&#125;</span><br><span class="line">a[title*=more]&#123;</span><br><span class="line">  background: blue;</span><br><span class="line">  color: #fff;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p> 结果显示：</p>
<p> <img src="http://img.mukewang.com/53202e050001c07e03820068.jpg" alt></p>
<h2 id="结构性伪类选择器—root"><a href="#结构性伪类选择器—root" class="headerlink" title="结构性伪类选择器—root"></a>结构性伪类选择器—root</h2><p><code>:root</code>选择器，从字面上我们就可以很清楚的理解是<font color="red">根选择器</font>，他的意思就是匹配元素E所在文档的<font color="red">根元素</font>。在HTML文档中，根元素始终是<font color="red"><code>&lt;html&gt;</code></font>。</p>
<p>示例演示：</p>
<p>通过“:root”选择器设置背景颜色</p>
<p>HTML代码：</p>
<p><code>&lt;div&gt;:root选择器的演示&lt;/div&gt;</code></p>
<p>CSS代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">:root &#123;</span><br><span class="line">  background:orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>演示结果：</p>
<p><img src="http://img.mukewang.com/531eb1d90001735d01560050.jpg" alt></p>
<p>“:root”选择器等同于<html>元素，简单点说：</html></p>
<p><code>:root{background:orange}</code></p>
<p><code>html {background:orange;}</code></p>
<p>得到的效果等同。</p>
<p>建议使用:root方法。</p>
<p>另外在IE9以下还可以借助“:root”实现hack功能。</p>
<h2 id="结构性伪类选择器—not"><a href="#结构性伪类选择器—not" class="headerlink" title="结构性伪类选择器—not"></a>结构性伪类选择器—not</h2><p><code>:not</code>选择器称为<font color="red">否定选择器</font>，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">form &#123;</span><br><span class="line">  width: 200px;</span><br><span class="line">  margin: 20px auto;</span><br><span class="line">&#125;</span><br><span class="line">div &#123;</span><br><span class="line">  margin-bottom: 20px;</span><br><span class="line">&#125;</span><br><span class="line">input:not([type=&quot;submit&quot;])&#123;</span><br><span class="line">  border:1px solid red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>相关HTML代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;form action=&quot;#&quot;&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;label for=&quot;name&quot;&gt;Text Input:&lt;/label&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; placeholder=&quot;John Smith&quot; /&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;label for=&quot;name&quot;&gt;Password Input:&lt;/label&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; placeholder=&quot;John Smith&quot; /&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; /&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/form&gt;  ​</span><br></pre></td></tr></table></figure>

<p>演示结果：</p>
<p><img src="http://img.mukewang.com/531eb2ca00014b5002370177.jpg" alt></p>
<h2 id="结构性伪类选择器—empty"><a href="#结构性伪类选择器—empty" class="headerlink" title="结构性伪类选择器—empty"></a>结构性伪类选择器—empty</h2><p><code>:empty</code>选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，<strong>哪怕是一个空格。</strong></p>
<p>示例显示：</p>
<p>比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。</p>
<p>HTML代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;p&gt;我是一个段落&lt;/p&gt;</span><br><span class="line">&lt;p&gt; &lt;/p&gt;</span><br><span class="line">&lt;p&gt;&lt;/p&gt;​</span><br></pre></td></tr></table></figure>

<p>CSS代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">p&#123;</span><br><span class="line"> background: orange;</span><br><span class="line"> min-height: 30px;</span><br><span class="line">&#125;</span><br><span class="line">p:empty &#123;</span><br><span class="line">  display: none;</span><br><span class="line">&#125;​</span><br></pre></td></tr></table></figure>

<p>演示结果：</p>
<p><img src="http://img.mukewang.com/531eb55b0001d7d401580126.jpg" alt></p>
<h2 id="结构性伪类选择器—target"><a href="#结构性伪类选择器—target" class="headerlink" title="结构性伪类选择器—target"></a>结构性伪类选择器—target</h2><p><code>:target</code>选择器称为目标选择器，用来匹配文档(页面)的<strong>url的某个标志符的目标元素</strong>。我们先来上个例子，然后再做分析。</p>
<p>示例展示</p>
<p>点击链接显示隐藏的段落。</p>
<p>HTML代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;h2&gt;&lt;a href=&quot;#brand&quot;&gt;Brand&lt;/a&gt;&lt;/h2&gt;</span><br><span class="line">&lt;div class=&quot;menuSection&quot; id=&quot;brand&quot;&gt;</span><br><span class="line">    content for Brand</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<p>CSS代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.menuSection&#123;</span><br><span class="line">  display: none;</span><br><span class="line">&#125;</span><br><span class="line">:target&#123;/*这里的:target就是指id=&quot;brand&quot;的div对象*/</span><br><span class="line">  display:block;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>演示结果：</p>
<p><img src="http://img.mukewang.com/53217ea30001103002230101.jpg" alt></p>
<p>分析：</p>
<ol>
<li><p>具体来说，触发元素的URL中的标志符通常会包含一个<font color="red">#号</font>，后面带有一个<font color="red">标志符名称</font>，上面代码中是：#brand</p>
</li>
<li><p><code>：target</code>就是用来匹配id为“brand”的元素（id=”brand”的元素）,上面代码中是那个div元素。</p>
</li>
</ol>
<p><strong>多个url（多个target）处理：</strong></p>
<p>就像上面的例子，#brand与后面的id=”brand”是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与<font color="red">id=””</font>中的名称对应就可以了。<br>如下面例子：<br>html代码：  </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;h2&gt;&lt;a href=&quot;#brand&quot;&gt;Brand&lt;/a&gt;&lt;/h2&gt;</span><br><span class="line">&lt;div class=&quot;menuSection&quot; id=&quot;brand&quot;&gt;</span><br><span class="line">  content for Brand</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;h2&gt;&lt;a href=&quot;#jake&quot;&gt;Brand&lt;/a&gt;&lt;/h2&gt;</span><br><span class="line">&lt;div class=&quot;menuSection&quot; id=&quot;jake&quot;&gt;</span><br><span class="line"> content for jake</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;h2&gt;&lt;a href=&quot;#aron&quot;&gt;Brand&lt;/a&gt;&lt;/h2&gt;</span><br><span class="line">&lt;div class=&quot;menuSection&quot; id=&quot;aron&quot;&gt;</span><br><span class="line">    content for aron</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<p>css代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">#brand:target &#123;</span><br><span class="line">  background: orange;</span><br><span class="line">  color: #fff;</span><br><span class="line">&#125;</span><br><span class="line">#jake:target &#123;</span><br><span class="line">  background: blue;</span><br><span class="line">  color: #fff;</span><br><span class="line">&#125;</span><br><span class="line">#aron:target &#123;</span><br><span class="line">  background: red;</span><br><span class="line">  color: #fff;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>上面的代码可以对不同的target对象分别设置不的样式。</p>
<h2 id="结构性伪类选择器—first-child"><a href="#结构性伪类选择器—first-child" class="headerlink" title="结构性伪类选择器—first-child"></a>结构性伪类选择器—first-child</h2><p>“:first-child”选择器表示的是选择<strong>父元素的第一个子元素的元素E</strong>。简单点理解就是选择元素中的第一个<strong>子元素</strong>，记住是子元素，而不是后代元素。</p>
<p>示例演示</p>
<p>通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。</p>
<p>HTML代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;ol&gt;</span><br><span class="line">  &lt;li&gt;&lt;a href=&quot;##&quot;&gt;Link1&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;&lt;a href=&quot;##&quot;&gt;Link2&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;&lt;a href=&quot;##&quot;&gt;link3&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">&lt;/ol&gt;</span><br></pre></td></tr></table></figure>

<p>CSS代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">ol &gt; li&#123;</span><br><span class="line">  font-size:20px;</span><br><span class="line">  font-weight: bold;</span><br><span class="line">  margin-bottom: 10px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">ol a &#123;</span><br><span class="line">  font-size: 16px;</span><br><span class="line">  font-weight: normal;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">ol &gt; li:first-child&#123;</span><br><span class="line">  color: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>演示结果：</p>
<p><img src="http://img.mukewang.com/531eb8ca0001c5ba01250125.jpg" alt></p>
<h2 id="结构性伪类选择器—last-child"><a href="#结构性伪类选择器—last-child" class="headerlink" title="结构性伪类选择器—last-child"></a>结构性伪类选择器—last-child</h2><p>“:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器，</p>
<p><code>ul&gt;li:last-child{background:blue;}</code></p>
<p>示例演示</p>
<p>在博客的排版中，每个段落都有15px的margin-bottom，假设不想让博客“post”中最后一个段落不需要底部的margin值，可以使用“:last-child”选择器。</p>
<p>HTML代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;post&quot;&gt;</span><br><span class="line">  &lt;p&gt;第一段落&lt;/p&gt;</span><br><span class="line">  &lt;p&gt;第二段落&lt;/p&gt;</span><br><span class="line">  &lt;p&gt;第三段落&lt;/p&gt;</span><br><span class="line">  &lt;p&gt;第四段落&lt;/p&gt;</span><br><span class="line">  &lt;p&gt;第五段落&lt;/p&gt;</span><br><span class="line">&lt;/div&gt;​</span><br></pre></td></tr></table></figure>

<p>CSS代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">.post &#123;</span><br><span class="line">  padding: 10px;</span><br><span class="line">  border: 1px solid #ccc;</span><br><span class="line">  width: 200px;</span><br><span class="line">  margin: 20px auto;</span><br><span class="line">&#125;</span><br><span class="line">.post p &#123;</span><br><span class="line">  margin:0 0 15px 0;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.post p:last-child &#123;</span><br><span class="line">  margin-bottom:0;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>演示结果：</p>
<p><img src="http://img.mukewang.com/531eb9cb0001428002760188.jpg" alt></p>
<h2 id="结构性伪类选择器—nth-child-n"><a href="#结构性伪类选择器—nth-child-n" class="headerlink" title="结构性伪类选择器—nth-child(n)"></a>结构性伪类选择器—nth-child(n)</h2><p>“:nth-child(n)”选择器用来定位<strong>某个父元素的一个或多个特定的子元素</strong>。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。</p>
<p><strong>经验与技巧</strong>:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：</p>
<p><img src="http://img.mukewang.com/531eba56000138aa05870197.jpg" alt></p>
<p>案例演示</p>
<p>  通过“:nth-child(n)”选择器，并且参数使用表达式“2n”，将偶数行列表背景色设置为橙色。</p>
<p>HTML代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;ol&gt;</span><br><span class="line">  &lt;li&gt;item1&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item2&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item3&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item4&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item5&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item6&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item7&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item8&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item9&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item10&lt;/li&gt;</span><br><span class="line">&lt;/ol&gt;​</span><br></pre></td></tr></table></figure>

<p>CSS代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">ol &gt; li:nth-child(2n)&#123;</span><br><span class="line">  background: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>演示结果：</p>
<p><img src="http://img.mukewang.com/531ebac90001750902580228.jpg" alt></p>
<h2 id="结构性伪类选择器—nth-last-child-n"><a href="#结构性伪类选择器—nth-last-child-n" class="headerlink" title="结构性伪类选择器—nth-last-child(n)"></a>结构性伪类选择器—nth-last-child(n)</h2><p>“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。</p>
<p>案例演示</p>
<p>选择列表中<font color="red">倒数</font>第五个列表项，将其背景设置为橙色。</p>
<p>HTML代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;ol&gt;</span><br><span class="line">  &lt;li&gt;item1&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item2&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item3&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item4&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item5&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item6&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item7&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item8&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item9&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item10&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item11&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item12&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item13&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item14&lt;/li&gt;</span><br><span class="line">  &lt;li&gt;item15&lt;/li&gt;</span><br><span class="line">&lt;/ol&gt;​</span><br></pre></td></tr></table></figure>

<p>CSS代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">ol &gt; li:nth-last-child(5)&#123;</span><br><span class="line">  background: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>演示结果：</p>
<p><img src="http://img.mukewang.com/531ebb7a0001d20b01530286.jpg" alt></p>
<h2 id="first-of-type选择器"><a href="#first-of-type选择器" class="headerlink" title="first-of-type选择器"></a>first-of-type选择器</h2><p>“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。</p>
<p><strong>示例演示：</strong></p>
<p>通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。</p>
<p>HTML代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;wrapper&quot;&gt;</span><br><span class="line">  &lt;div&gt;我是一个块元素，我是.wrapper的第一个子元素&lt;/div&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素&lt;/p&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落元素&lt;/p&gt;</span><br><span class="line">  &lt;div&gt;我是一个块元素&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<p>CSS代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">.wrapper &#123;</span><br><span class="line">  width: 500px;</span><br><span class="line">  margin: 20px auto;</span><br><span class="line">  padding: 10px;</span><br><span class="line">  border: 1px solid #ccc;</span><br><span class="line">  color: #fff;</span><br><span class="line">&#125;</span><br><span class="line">.wrapper &gt; div &#123;</span><br><span class="line">  background: green;</span><br><span class="line">&#125;</span><br><span class="line">.wrapper &gt; p &#123;</span><br><span class="line">  background: blue;</span><br><span class="line">&#125;</span><br><span class="line">/*我要改变第一个段落的背景为橙色*/</span><br><span class="line">.wrapper &gt; p:first-of-type &#123;</span><br><span class="line">  background: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>演示结果：</p>
<p><img src="http://img.mukewang.com/532959820001ab6804700149.jpg" alt></p>
<h2 id="nth-of-type-n-选择器"><a href="#nth-of-type-n-选择器" class="headerlink" title="nth-of-type(n)选择器"></a>nth-of-type(n)选择器</h2><p>“<code>:nth-of-type(n)</code>”选择器和“<code>:nth-child(n)</code>”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的<strong>整数</strong>，也可以是表达式，还可以是<strong>关键词</strong>。</p>
<p>示例演示</p>
<p>通过“:nth-of-type(2n)”选择器，将容器“div.wrapper”中偶数段数的背景设置为橙色。</p>
<p>HTML代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;wrapper&quot;&gt;</span><br><span class="line">  &lt;div&gt;我是一个Div元素&lt;/div&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落元素&lt;/p&gt;</span><br><span class="line">  &lt;div&gt;我是一个Div元素&lt;/div&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落&lt;/p&gt;</span><br><span class="line">  &lt;div&gt;我是一个Div元素&lt;/div&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落&lt;/p&gt;</span><br><span class="line">  &lt;div&gt;我是一个Div元素&lt;/div&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落&lt;/p&gt;</span><br><span class="line">  &lt;div&gt;我是一个Div元素&lt;/div&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落&lt;/p&gt;</span><br><span class="line">  &lt;div&gt;我是一个Div元素&lt;/div&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落&lt;/p&gt;</span><br><span class="line">  &lt;div&gt;我是一个Div元素&lt;/div&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落&lt;/p&gt;</span><br><span class="line">  &lt;div&gt;我是一个Div元素&lt;/div&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落&lt;/p&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<p>CSS代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.wrapper &gt; p:nth-of-type(2n)&#123;</span><br><span class="line">  background: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>演示结果：</p>
<p><img src="http://img.mukewang.com/532be1ed00010f5403290494.jpg" alt></p>
<h2 id="last-of-type选择器"><a href="#last-of-type选择器" class="headerlink" title="last-of-type选择器"></a>last-of-type选择器</h2><p>“<code>:last-of-type</code>”选择器和“<code>:first-of-type</code>”选择器功能是一样的，不同的是他选择是父元素下的某个类型的<strong>最后一个子元素</strong>。</p>
<p>示例演示</p>
<p>通过“<code>:last-of-type</code>”选择器，将容器“<code>div.wrapper</code>”中最后一个段落元素背景设置为橙色</p>
<p>（提示：这个段落不是“div.wrapper”容器的最后一个子元素）。</p>
<p>HTML代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;wrapper&quot;&gt;</span><br><span class="line">  &lt;p&gt;我是第一个段落&lt;/p&gt;</span><br><span class="line">  &lt;p&gt;我是第二个段落&lt;/p&gt;</span><br><span class="line">  &lt;p&gt;我是第三个段落&lt;/p&gt;</span><br><span class="line">  &lt;div&gt;我是第一个Div元素&lt;/div&gt;</span><br><span class="line">  &lt;div&gt;我是第二个Div元素&lt;/div&gt;</span><br><span class="line">  &lt;div&gt;我是第三个Div元素&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<p>CSS代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"> .wrapper &gt; p:last-of-type&#123;</span><br><span class="line">  background: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>演示结果：</p>
<p><img src="http://img.mukewang.com/53295ba70001d68d02470183.jpg" alt></p>
<h2 id="nth-last-of-type-n-选择器"><a href="#nth-last-of-type-n-选择器" class="headerlink" title="nth-last-of-type(n)选择器"></a>nth-last-of-type(n)选择器</h2><p>“<code>:nth-last-of-type(n)</code>”选择器和“<code>:nth-of-type(n)</code>”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“<code>:nth-last-child(n)</code>”选择器一样。</p>
<p>示例演示</p>
<p>通过“<code>:nth-last-of-type(n)</code>”选择器将容器“<code>div.wrapper</code>”中的倒数第三个段落背景设置为橙色。</p>
<p>HTML代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;wrapper&quot;&gt;</span><br><span class="line">  &lt;p&gt;我是第一个段落&lt;/p&gt;</span><br><span class="line">  &lt;p&gt;我是第二个段落&lt;/p&gt;</span><br><span class="line">  &lt;p&gt;我是第三个段落&lt;/p&gt;</span><br><span class="line">  &lt;p&gt;我是第四个段落&lt;/p&gt;</span><br><span class="line">  &lt;p&gt;我是第五个段落&lt;/p&gt;</span><br><span class="line">  &lt;div&gt;我是一个Div元素&lt;/div&gt;</span><br><span class="line">  &lt;p&gt;我是第六个段落&lt;/p&gt;</span><br><span class="line">  &lt;p&gt;我是第七个段落&lt;/p&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<p>CSS代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.wrapper &gt; p:nth-last-of-type(3)&#123;</span><br><span class="line">  background: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>演示结果：</p>
<p><img src="http://img.mukewang.com/53295c5900015a5a02190200.jpg" alt></p>
<h2 id="only-child选择器"><a href="#only-child选择器" class="headerlink" title="only-child选择器"></a>only-child选择器</h2><p>“<code>:only-child</code>”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个<strong>唯一的子元素</strong>。</p>
<p>示例演示</p>
<p>通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。</p>
<p>HTML代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;post&quot;&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落&lt;/p&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落&lt;/p&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;div class=&quot;post&quot;&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落&lt;/p&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<p>CSS代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">.post p &#123;</span><br><span class="line">  background: green;</span><br><span class="line">  color: #fff;</span><br><span class="line">  padding: 10px;</span><br><span class="line">&#125;</span><br><span class="line">.post p:only-child &#123;</span><br><span class="line">  background: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>演示结果：</p>
<p><img src="http://img.mukewang.com/53295d4a0001e07202260173.jpg" alt></p>
<h2 id="only-of-type选择器"><a href="#only-of-type选择器" class="headerlink" title="only-of-type选择器"></a>only-of-type选择器</h2><p>“<code>:only-of-type</code>”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“<code>:only-of-type</code>”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“<code>:only-of-type</code>”选择器就可以选中这个元素中的唯一一个类型子元素。</p>
<p>示例演示</p>
<p>通过“<code>:only-of-type</code>”选择器来修改容器中仅有一个div元素的背景色为橙色。</p>
<p>HTML代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;wrapper&quot;&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落&lt;/p&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落&lt;/p&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落&lt;/p&gt;</span><br><span class="line">  &lt;div&gt;我是一个Div元素&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;div class=&quot;wrapper&quot;&gt;</span><br><span class="line">  &lt;div&gt;我是一个Div&lt;/div&gt;</span><br><span class="line">  &lt;ul&gt;</span><br><span class="line">    &lt;li&gt;我是一个列表项&lt;/li&gt;</span><br><span class="line">  &lt;/ul&gt;</span><br><span class="line">  &lt;p&gt;我是一个段落&lt;/p&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<p>CSS代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.wrapper &gt; div:only-of-type &#123;</span><br><span class="line">  background: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>演示结果：</p>
<p><img src="http://img.mukewang.com/53295deb000128d801980212.jpg" alt></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/07/14/CSS额外知识点-选择器（上）/" data-id="ck4r400sh009tl0w0wknpw72s" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-CSS额外知识点-背景样式" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/07/14/CSS额外知识点-背景样式/" class="article-date">
  <time datetime="2019-07-14T06:50:10.000Z" itemprop="datePublished">2019-07-14</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/07/14/CSS额外知识点-背景样式/">CSS额外知识点--背景样式</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="background-origin"><a href="#background-origin" class="headerlink" title="background-origin"></a><strong>background-origin</strong></h2><p>设置元素背景图片的原始起始位置。</p>
<p>语法：</p>
<p><code>background-origin ： border-box | padding-box | content-box;</code></p>
<p>参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。</p>
<p>效果如下：</p>
<p><img src="http://img.mukewang.com/531003de0001166903660166.jpg" alt></p>
<p>需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。</p>
<h2 id="background-clip"><a href="#background-clip" class="headerlink" title="background-clip"></a><strong>background-clip</strong></h2><p>用来将背景图片做适当的裁剪以适应实际需要。</p>
<p>语法：</p>
<p><code>background-clip ： border-box | padding-box | content-box | no-clip</code></p>
<p>参数分别表示从<strong>边框</strong>、或<strong>内填充</strong>，或者<strong>内容区域向外裁剪背景</strong>。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。</p>
<p>效果如下图所示：</p>
<p><img src="http://img.mukewang.com/5310065d0001c95103660166.jpg" alt></p>
<h2 id="background-size"><a href="#background-size" class="headerlink" title="background-size"></a><strong>background-size</strong></h2><p>设置背景图片的大小，以<strong>长度值</strong>或<strong>百分比</strong>显示，还可以通过<strong>cover</strong>和<strong>contain</strong>来对图片进行伸缩。</p>
<p>语法：</p>
<p><code>background-size: auto | &lt;长度值&gt; | &lt;百分比&gt; | cover | contain</code></p>
<p>取值说明：</p>
<p>1、<strong>auto</strong>：默认值，不改变背景图片的原始高度和宽度；</p>
<p>2、<strong>&lt;长度值&gt;</strong>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；</p>
<p>3、<strong>&lt;百分比&gt;</strong>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；</p>
<p>4、<strong>cover</strong>：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；</p>
<p>5、<strong>contain</strong>：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。</p>
<h2 id="multiple-backgrounds"><a href="#multiple-backgrounds" class="headerlink" title="multiple backgrounds"></a><strong>multiple backgrounds</strong></h2><p>多重背景，也就是CSS2里<strong>background</strong>的属性外加<strong>origin</strong>、<strong>clip</strong>和<strong>size</strong>组成的新background的多次叠加，缩写时为用<strong>逗号</strong>隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。</p>
<p>语法缩写如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...</span><br></pre></td></tr></table></figure>

<p>可以把上面的缩写拆解成以下形式：</p>
<p><code>background-image:url1,url2,...,urlN;</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">background-repeat : repeat1,repeat2,...,repeatN;</span><br><span class="line">backround-position : position1,position2,...,positionN;</span><br><span class="line">background-size : size1,size2,...,sizeN;</span><br><span class="line">background-attachment : attachment1,attachment2,...,attachmentN;</span><br><span class="line">background-clip : clip1,clip2,...,clipN;</span><br><span class="line">background-origin : origin1,origin2,...,originN;</span><br><span class="line">background-color : color;</span><br></pre></td></tr></table></figure>

<p>注意：</p>
<p>用逗号隔开每组 background 的缩写值；</p>
<p>如果有 size 值，需要紧跟 position 并且用 “/“ 隔开；</p>
<p>如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。</p>
<p>background-color 只能设置一个。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/07/14/CSS额外知识点-背景样式/" data-id="ck4r400oc001vl0w0gbvy1q92" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-CSS额外知识点-文字和字体" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/07/14/CSS额外知识点-文字和字体/" class="article-date">
  <time datetime="2019-07-14T06:28:17.000Z" itemprop="datePublished">2019-07-14</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/07/14/CSS额外知识点-文字和字体/">CSS额外知识点--文字和字体</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="text-overflow-与-word-wrap"><a href="#text-overflow-与-word-wrap" class="headerlink" title="text-overflow 与 word-wrap"></a><strong>text-overflow</strong> 与 <strong>word-wrap</strong></h2><p>text-overflow用来设置是否使用一个省略标记（…）标示对象内文本的溢出。</p>
<p>语法：</p>
<p><img src="http://img.mukewang.com/53070cc00001a5bc06000200.jpg" alt></p>
<p>但是<strong>text-overflow</strong>只是用来说明文字溢出时用什么方式显示，要实现溢出时产生<strong>省略号</strong>的效果，还须定义<strong>强制文本在一行内显示</strong>（white-space:nowrap）及<strong>溢出内容为隐藏</strong>（overflow:hidden），只有这样才能实现<strong>溢出文本显示省略号</strong>的效果，代码如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">text-overflow:ellipsis; </span><br><span class="line">overflow:hidden; </span><br><span class="line">white-space:nowrap;</span><br></pre></td></tr></table></figure>

<p>同时，<strong>word-wrap</strong>也可以用来设置<strong>文本行为</strong>，当前行超过指定容器的边界时是否断开转行。</p>
<p>语法：</p>
<p><img src="http://img.mukewang.com/53070cf700018a2b06000200.jpg" alt></p>
<p><strong>normal</strong>为浏览器默认值，<strong>break-word</strong>设置在长单词或 <strong>URL地址</strong>内部进行换行，此属性不常用，用浏览器默认值即可。</p>
<h2 id="嵌入字体-font-face"><a href="#嵌入字体-font-face" class="headerlink" title="嵌入字体@font-face"></a><strong>嵌入字体@font-face</strong></h2><p>@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。</p>
<p>语法：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">@font-face &#123;</span><br><span class="line">    font-family : 字体名称;</span><br><span class="line">    src : 字体文件在服务器上的相对或绝对路径;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<p>这样设置之后，就可以像使用普通字体一样在<code>（font-*）</code>中设置字体样式。</p>
<p>比如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">p &#123;</span><br><span class="line">    font-size :12px;</span><br><span class="line">    font-family : &quot;My Font&quot;;</span><br><span class="line">    /*必须项，设置@font-face中font-family同样的值*/</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="文本阴影text-shadow"><a href="#文本阴影text-shadow" class="headerlink" title="文本阴影text-shadow"></a>文本阴影text-shadow</h2><p>text-shadow可以用来设置文本的阴影效果。</p>
<p>语法：</p>
<p><code>text-shadow: X-Offset Y-Offset blur color;</code></p>
<p><font color="LightPink">X-Offset</font>：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；      </p>
<p><font color="LightPink">Y-Offset</font>：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；</p>
<p><font color="LightPink">Blur</font>：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；</p>
<p><font color="LightPink">Color</font>：是指阴影的颜色，其可以使用rgba色。</p>
<p>比如，我们可以用下面代码实现设置阴影效果。</p>
<p><code>text-shadow: 0 1px 1px #fff</code></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/07/14/CSS额外知识点-文字和字体/" data-id="ck4r400oa001pl0w02hy9lffb" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-CSS额外知识点-颜色" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/07/14/CSS额外知识点-颜色/" class="article-date">
  <time datetime="2019-07-14T06:13:49.000Z" itemprop="datePublished">2019-07-14</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/07/14/CSS额外知识点-颜色/">CSS额外知识点--颜色</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="颜色之RGBA"><a href="#颜色之RGBA" class="headerlink" title="颜色之RGBA"></a>颜色之RGBA</h2><p>RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。</p>
<p>语法：</p>
<p><code>color：rgba(R,G,B,A)</code></p>
<p>以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。</p>
<p>代码示例：</p>
<p><code>background-color:rgba(100,120,60,0.5);</code></p>
<h2 id="渐变色彩"><a href="#渐变色彩" class="headerlink" title="渐变色彩"></a>渐变色彩</h2><p>CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。</p>
<p>这一小节我们来说一下线性渐变：</p>
<p><img src="http://img.mukewang.com/54b72b2e0001500103790158.jpg" alt></p>
<p>参数：</p>
<p>第一个参数:指定<strong>渐变方向</strong>，可以用“<strong>角度</strong>”的关键词或“<strong>英文</strong>”来表示：</p>
<p><img src="http://img.mukewang.com/542a25da00017e9406980223.jpg" alt></p>
<p>（单击图片可放大）</p>
<p>第一个参数省略时，默认为“180deg”，等同于“to bottom”。</p>
<p>第二个和第三个参数，表示<strong>颜色的起始点和结束点</strong>，可以有多个颜色值。</p>
<p><code>background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);</code></p>
<p>效果图：</p>
<p><img src="http://img.mukewang.com/54b72c080001611c04230192.jpg" alt></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/07/14/CSS额外知识点-颜色/" data-id="ck4r400oh0024l0w0htmfmc8r" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-CSS额外知识点" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/07/03/CSS额外知识点/" class="article-date">
  <time datetime="2019-07-03T00:08:37.000Z" itemprop="datePublished">2019-07-03</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/07/03/CSS额外知识点/">CSS额外知识点--边框效果</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="圆角效果-border-radius"><a href="#圆角效果-border-radius" class="headerlink" title="圆角效果 border-radius"></a>圆角效果 border-radius</h2><p>border-radius是向元素添加圆角边框。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">使用方法：</span><br><span class="line">border-radius:10px;/* 所有角都使用半径为10px的圆角 */ </span><br><span class="line"></span><br><span class="line">border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */</span><br></pre></td></tr></table></figure>

<p>不要以为<code>border-radius</code>的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。</p>
<h2 id="阴影-box-shadow"><a href="#阴影-box-shadow" class="headerlink" title="阴影 box-shadow"></a>阴影 box-shadow</h2><p><img src="http://img.mukewang.com/54292d620001ffb107080250.jpg" alt></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">box-shadow是向盒子添加阴影。支持添加一个或者多个。</span><br><span class="line"></span><br><span class="line">很简单的一段代码，就实现了投影效果，酷毙了。我们来看下语法：</span><br><span class="line"></span><br><span class="line">box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];</span><br><span class="line"></span><br><span class="line">参数介绍：</span><br><span class="line"></span><br><span class="line">注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。</span><br></pre></td></tr></table></figure>

<h4 id="为元素设置外阴影："><a href="#为元素设置外阴影：" class="headerlink" title="为元素设置外阴影："></a>为元素设置外阴影：</h4><p>示例代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.box_shadow&#123;</span><br><span class="line">  box-shadow:4px 2px 6px #333333; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>效果：</p>
<p><img src="http://img.mukewang.com/52e21c9000013c8f01180117.jpg" alt></p>
<h4 id="为元素设置内阴影："><a href="#为元素设置内阴影：" class="headerlink" title="为元素设置内阴影："></a>为元素设置内阴影：</h4><p>示例代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.box_shadow&#123;</span><br><span class="line">  box-shadow:4px 2px 6px #333333 inset; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>效果：</p>
<p><img src="http://img.mukewang.com/54292b990001ebea01290115.jpg" alt></p>
<h4 id="阴影模糊半径与阴影扩展半径的区别"><a href="#阴影模糊半径与阴影扩展半径的区别" class="headerlink" title="阴影模糊半径与阴影扩展半径的区别"></a><font color="red">阴影模糊半径</font>与<font color="red">阴影扩展半径</font>的区别</h4><p>阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；</p>
<p>阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；</p>
<h4 id="X轴偏移量和Y轴偏移量值可以设置为负数"><a href="#X轴偏移量和Y轴偏移量值可以设置为负数" class="headerlink" title="X轴偏移量和Y轴偏移量值可以设置为负数"></a><font color="red">X轴偏移量</font>和<font color="red">Y轴偏移量值</font>可以设置为负数</h4><p>box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];</p>
<p>X轴偏移量为负数：</p>
<p>.boxshadow-outset{<br>    width:100px;<br>    height:100px;<br>    box-shadow:-4px 4px 6px #666;<br>}</p>
<p>效果图：</p>
<p><img src="http://img.mukewang.com/548fd91c000140a901540143.jpg" alt></p>
<p>Y轴偏移量为负数：</p>
<p>.boxshadow-outset{<br>    width:100px;<br>    height:100px;<br>    box-shadow:4px -4px 6px #666;<br>}</p>
<p>效果图：</p>
<p><img src="http://img.mukewang.com/548fd93e00011dd101570142.jpg" alt></p>
<h2 id="为边框应用图片-border-image"><a href="#为边框应用图片-border-image" class="headerlink" title="为边框应用图片 border-image"></a>为边框应用图片 border-image</h2><p>顾名思义就是为边框应用背景图片，它和我们常用的background属性比较相似。例如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">background:url(xx.jpg) 10px 20px no-repeat;</span><br></pre></td></tr></table></figure>

<p>但是又比背景图片复杂一些。</p>
<p>想象一下：一个矩形，有四个边框。如果应用了边框图片，图片该怎么分布呢？ 图片会自动被切割分成四等分。用于四个边框。</p>
<p>可以理解为它是一个切片工具，会自动把用做边框的图片切割。怎么切割呢？为了方便理解，做了一张特殊的图片，由9个矩形（70<code>*</code>70像素）拼成的一张图（210<code>*</code>210像素），并标注好序号，是不是像传说中的九宫图，如下：</p>
<p><img src="http://img.mukewang.com/52e21fea000127e802100210.jpg" alt></p>
<p>我们把上图当作边框图片 来应用一下， 看一看是什么效果</p>
<p>根据border-image的语法：</p>
<p><img src="http://img.mukewang.com/52e2201a0001b1e004720260.jpg" alt></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">#border-image&#123;</span><br><span class="line">   background:#F4FFFA;</span><br><span class="line">   width:210px; height:210px; border:70px solid #ddd;</span><br><span class="line">   border-image:url(borderimg.png) 70 repeat  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>效果：</p>
<p><img src="http://img.mukewang.com/52e220780001091a03530354.jpg" alt></p>
<p>从序号可以看出div的四个角分别对应了背景图片的四个角。而2,4,6,8 被重复。5在哪？因为是从四周向中心切割图片的所以，5显示不出来。而在chrome浏览器中5是存在的，下图的样子：</p>
<p><img src="http://img.mukewang.com/52e220be0001cef603560358.jpg" alt></p>
<p><strong>repeat</strong>的意思就是重复，目前因为是刚好被整除，效果看不出来。如果改下DIV的宽高，再来看重复的效果：</p>
<p><img src="http://img.mukewang.com/52e2210700016f5603190313.jpg" alt></p>
<p>边角部分为裁掉了，可见repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复。</p>
<p><strong>Round 参数</strong>：Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸）；</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">#border-image &#123;</span><br><span class="line"></span><br><span class="line">     width:170px;</span><br><span class="line"></span><br><span class="line">     height:170px;</span><br><span class="line"></span><br><span class="line">     border:70px solid;</span><br><span class="line"></span><br><span class="line">     border-image:url(borderimg.png) 70 round;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>

<p>效果：</p>
<p><img src="http://img.mukewang.com/52e2216700014c4103190312.jpg" alt></p>
<p>可见图片被压扁了。</p>
<p><strong>Stretch</strong> 很好理解就是拉伸，有多长拉多长。有多远“滚”多远。</p>
<p><code>border-image:url(borderimg.png) 70 stretch</code></p>
<p>看一下效果：</p>
<p><img src="http://img.mukewang.com/52e2218d0001d45403530366.jpg" alt></p>
<p>2,4,6,8分别被拉伸显示。</p>
<p>注意：Chrome下，中间部分也会被拉伸，webkit浏览器对于round属性和repeat属性似乎没有区分，显示效果是一样的。</p>
<p>Firefox 26.0 下是可以准确区分的。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/07/03/CSS额外知识点/" data-id="ck4r400og0021l0w0gffxe3wk" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-Qt之菜单概述" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/06/25/Qt之菜单概述/" class="article-date">
  <time datetime="2019-06-25T07:18:44.000Z" itemprop="datePublished">2019-06-25</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/QT/">QT</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/06/25/Qt之菜单概述/">Qt之菜单概述</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<hr>
<h2 id="菜单所需头文件"><a href="#菜单所需头文件" class="headerlink" title="菜单所需头文件"></a>菜单所需头文件</h2><ul>
<li><p>QMenuBar：菜单（用于添加菜单栏）</p>
</li>
<li><p>QMenu：菜单（添加菜单）</p>
</li>
<li><p>QAction：添加菜单项（添加动作）</p>
</li>
<li><p>QToolBar：添加菜单项的快捷方式</p>
</li>
<li><p>QStatusBar：状态栏</p>
</li>
<li><p>QLabel：标签</p>
</li>
</ul>
<hr>
<h2 id="创建"><a href="#创建" class="headerlink" title="创建"></a>创建</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">//模板，创建并且指定当前窗口为父对象（实质上为构造函数）</span><br><span class="line">    头文件名 *名字 = new 头文件名(this);</span><br><span class="line"></span><br><span class="line">//创建菜单栏</span><br><span class="line">    QMenuBar *mBar = menuBar();</span><br><span class="line"></span><br><span class="line">//添加菜单项，添加动作</span><br><span class="line">    QAction *pNew = pFile-&gt;addAction(QString::fromLocal8Bit(&quot;新建&quot;));</span><br><span class="line"></span><br><span class="line">//添加分割线</span><br><span class="line">    pFile-&gt;addSeparator();</span><br><span class="line"></span><br><span class="line">//添加工具栏，菜单项的快捷方式</span><br><span class="line">    QToolBar *toolBar = addToolBar(&quot;toolBar&quot;);</span><br><span class="line"></span><br><span class="line">//工具栏添加快捷键</span><br><span class="line">    toolBar-&gt;addAction(pNew);</span><br><span class="line"></span><br><span class="line">//新建状态栏</span><br><span class="line">    QStatusBar *statusBar = statusBar();</span><br></pre></td></tr></table></figure>

<hr>
<h2 id="实战案例"><a href="#实战案例" class="headerlink" title="实战案例"></a>实战案例</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line">//菜单栏</span><br><span class="line">QMenuBar *mBar = menuBar();</span><br><span class="line"></span><br><span class="line">//添加菜单</span><br><span class="line">QMenu *pFile = mBar-&gt;addMenu(QString::fromLocal8Bit(&quot;文件&quot;));</span><br><span class="line"></span><br><span class="line">//添加菜单项，添加动作</span><br><span class="line">QAction *pNew = pFile-&gt;addAction(QString::fromLocal8Bit(&quot;新建&quot;));</span><br><span class="line">QAction *pOpen = pFile-&gt;addAction(QString::fromLocal8Bit(&quot;打开&quot;));</span><br><span class="line"></span><br><span class="line">pFile-&gt;addSeparator();//添加分割线</span><br><span class="line"></span><br><span class="line">connect(pNew, &amp;QAction::triggered,</span><br><span class="line">        [=]()</span><br><span class="line">        &#123;</span><br><span class="line">            qDebug()&lt;&lt;QString::fromLocal8Bit(&quot;新建被按下&quot;);  //打印</span><br><span class="line">        &#125;</span><br><span class="line">       );</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">//工具栏，菜单项的快捷方式</span><br><span class="line">QToolBar *toolBar = addToolBar(&quot;toolBar&quot;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">//添加小控件</span><br><span class="line">QPushButton *b = new QPushButton(this);</span><br><span class="line">b-&gt;setText(&quot;^_^&quot;);</span><br><span class="line">toolBar-&gt;addWidget(b);</span><br><span class="line">connect(b, &amp;QPushButton::clicked,</span><br><span class="line">        [=]()</span><br><span class="line">        &#123;</span><br><span class="line">            b-&gt;setText(&quot;123&quot;);</span><br><span class="line">        &#125;</span><br><span class="line">        );</span><br><span class="line"></span><br><span class="line">//工具栏添加快捷键</span><br><span class="line">toolBar-&gt;addAction(pNew);</span><br><span class="line"></span><br><span class="line">//状态栏</span><br><span class="line">QStatusBar *sBar = statusBar();    //新建状态栏</span><br><span class="line">QLabel *label = new QLabel(this);</span><br><span class="line">label-&gt;setText(&quot;Normal text file&quot;);</span><br><span class="line">sBar-&gt;addWidget(label);</span><br><span class="line"></span><br><span class="line">sBar-&gt;addWidget(new QLabel(&quot;2&quot;, this));     //从左往右添加</span><br><span class="line"></span><br><span class="line">sBar-&gt;addPermanentWidget(new QLabel(&quot;2&quot;, this));    //从右往左添加</span><br><span class="line"></span><br><span class="line">//核心控件,文本编辑框</span><br><span class="line">QTextEdit *textEdit = new QTextEdit(this);</span><br><span class="line">setCentralWidget(textEdit);</span><br><span class="line"></span><br><span class="line">//浮动窗口</span><br><span class="line">QDockWidget *dock = new QDockWidget(this);</span><br><span class="line">addDockWidget(Qt::RightDockWidgetArea, dock);</span><br><span class="line"></span><br><span class="line">//给浮动窗口添加控件</span><br><span class="line">QTextEdit *textEdit1 = new QTextEdit(this);</span><br><span class="line">dock-&gt;setWidget(textEdit1);</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/06/25/Qt之菜单概述/" data-id="ck4r400rn0081l0w0tu0r38tu" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/QT/">QT</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-QT中提示“常量中有换行符”解决办法" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/06/25/QT中提示“常量中有换行符”解决办法/" class="article-date">
  <time datetime="2019-06-25T00:42:50.000Z" itemprop="datePublished">2019-06-25</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/QT/">QT</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/06/25/QT中提示“常量中有换行符”解决办法/">QT中提示“常量中h有换行符”解决办法</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>使用QT编译界面时，免不了要使用中文，有会出现乱码，有时会提示“常量中有换行符”，而不能正常编译，因此可以通过下面的方法解决。</p>
<p>PS：本文的环境，QT5.7.1，VS2015</p>
<ol>
<li>将文本编码设置为：如果编码是UTF-8则添加。</li>
</ol>
<p><img src="https://img-blog.csdn.net/20170530135801390?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbG92ZWx5YWlx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt></p>
<ol start="2">
<li>在界面中需要使用中文的地方，使用：</li>
</ol>
<p>QString::fromLocal8Bit</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">将 Unicode 编码转换为本地系统编码。</span><br></pre></td></tr></table></figure>

<p>经过以上处理之后，编译期就不会再报“常量中有换行符”错误了。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/06/25/QT中提示“常量中有换行符”解决办法/" data-id="ck4r400ri007ol0w0gq4zsidx" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/QT/">QT</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-QT信号与槽及其附属知识点-md" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/06/24/QT信号与槽及其附属知识点-md/" class="article-date">
  <time datetime="2019-06-24T09:10:32.000Z" itemprop="datePublished">2019-06-24</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/QT/">QT</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/06/24/QT信号与槽及其附属知识点-md/">QT信号与槽及其附属知识点</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<hr>
<h2 id="QT常用函数概述"><a href="#QT常用函数概述" class="headerlink" title="QT常用函数概述"></a>QT常用函数概述</h2><ul>
<li><p>setWindowTitle(“string”): 设置标题</p>
</li>
<li><p>setText(“string”)：给按钮设置内容</p>
</li>
<li><p>setParent(&amp;父对象)：设置父对象</p>
</li>
<li><p>构造函数传参：设置父对象（只需要父对象显示，其子对象自动显示）</p>
</li>
<li><p>move(x, y)：以左上角为坐标原点，移动x, y</p>
</li>
<li><p>show：显示对象所属控件</p>
</li>
<li><p>exec：进程一直显示，等待用户操作</p>
</li>
<li><p>connect(&amp;b1, &amp;QPushButton::pressed, this, &amp;MainWidget::close)</p>
<ol>
<li><p>&amp;b1: 信号发出者，指针类型</p>
</li>
<li><p>&amp;QPushButton::pressed：处理的信号，&amp;发送者的类名::信号的名字</p>
</li>
<li><p>this：信号接收者</p>
</li>
<li><p>&amp;MainWidget::close:  槽函数，信号处理函数  &amp;接收的类名::槽函数名字（接收对象在接收到信号之后所需要调用的函数）</p>
</li>
</ol>
</li>
<li><p>disconnect：断开信号和槽的连接</p>
</li>
<li><p>hide：对象所属控件隐藏</p>
</li>
<li><p>resize(x, y)：重新界定子窗口大小</p>
</li>
<li><p>move(x, y)：相对于父窗口，子窗口移动(x, y)</p>
</li>
<li><p>setGeometry(x1, y1, x2, y2)：(x1, y1)为框的位置，(x2, y2)为框的大小</p>
</li>
<li><p>menuBar：添加菜单栏</p>
</li>
<li><p>addMenu：添加菜单</p>
</li>
<li><p>addAction：添加菜单项，添加动作</p>
</li>
<li><p>addSeparator：添加分割线</p>
</li>
<li><p>addToolBar(“toolBar”)：添加菜单栏快捷方式</p>
</li>
<li><p>statusBar()：新建状态栏</p>
</li>
<li><p>QLabel：新建标签</p>
</li>
<li><p>addWidget：从左往右添加状态栏</p>
</li>
<li><p>addPermanentWidget：从右往左添加状态栏</p>
</li>
<li><p>QTextEdit：新建文本编辑框</p>
</li>
<li><p>setCentralWidget：为文本编辑框添加文本编辑功能</p>
</li>
<li><p>setWidget：给对应窗口设置文本编辑</p>
<p>  例如：<code>this-&gt;setWidget(textEdit);</code>给当前窗口设置文本编辑</p>
</li>
<li><p>QMessageBox::about：创建关于对话框</p>
</li>
<li><p>QMessageBox::question：创建问题对话框</p>
</li>
<li><p>setCurrentIndex：切换页</p>
</li>
<li><p>setTextMargins：设置外边距（设置内容显示间隙）</p>
</li>
<li><p>setEchoMode：设置内容显示方式</p>
</li>
</ul>
<h3 id="按钮，框函数"><a href="#按钮，框函数" class="headerlink" title="按钮，框函数"></a>按钮，框函数</h3><ul>
<li><p>triggered</p>
</li>
<li><p>pressed</p>
</li>
<li><p>clicked</p>
</li>
</ul>
<p><strong>功能好像一样QAQ</strong></p>
<hr>
<h2 id="QT头文件"><a href="#QT头文件" class="headerlink" title="QT头文件"></a>QT头文件</h2><ul>
<li><p>QPushButton：按钮</p>
</li>
<li><p>QMenuBar：菜单（用于添加菜单栏）</p>
</li>
<li><p>QMenu：菜单（添加菜单）</p>
</li>
<li><p>QAction：添加菜单项（添加动作）</p>
</li>
<li><p>QDebug：打印</p>
</li>
<li><p>QToolBar：添加菜单项的快捷方式</p>
</li>
<li><p>QStatusBar：状态栏</p>
</li>
<li><p>QLabel：标签</p>
</li>
<li><p>QTextEdit：文本编辑框（也称核心控件）</p>
</li>
<li><p>QDockWidget：浮动窗口</p>
</li>
<li><p>QDialog：模态对话框</p>
</li>
<li><p>QMessageBox：对话框</p>
</li>
<li><p>QFileDialog：文件对话框</p>
<p>  示例：</p>
  <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">QAction *p5 = menu-&gt;addAction(QString::fromLocal8Bit(&quot;文件对话框&quot;));</span><br><span class="line">connect(p5, &amp;QAction::triggered,</span><br><span class="line">    [=]()</span><br><span class="line">    &#123;</span><br><span class="line">        QString path = QFileDialog::getOpenFileName(</span><br><span class="line">                    this,</span><br><span class="line">                    &quot;open&quot;,</span><br><span class="line">                    &quot;../&quot;,//打开文件对话框的位置（命令行）</span><br><span class="line">                    &quot;source(*.cpp *.h);;Text(*.txt);;All(*.*)&quot;//文件类型</span><br><span class="line">                    );</span><br><span class="line">        qDebug()&lt;&lt;path;</span><br><span class="line">    &#125;</span><br><span class="line">    );</span><br></pre></td></tr></table></figure>
</li>
<li><p>QStringList：字符串列表</p>
</li>
<li><p>QCompleter：字符表达形式？？？</p>
</li>
<li><p>QMovie：gif动画</p>
</li>
</ul>
<hr>
<h2 id="信号与槽"><a href="#信号与槽" class="headerlink" title="信号与槽"></a>信号与槽</h2><h3 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h3><p>信号槽是 Qt 框架引以为豪的机制之一。所谓信号槽，实际就是观察者模式。当某个事件发生之后，比如，按钮检测到自己被点击了一下，它就会发出一个信号（signal）。这种发出是没有目的的，类似广播。如果有对象对这个信号感兴趣，它就会使用连接（connect）函数，意思是，将想要处理的信号和自己的一个函数（称为槽（slot））绑定来处理这个信号。也就是说，当信号发出时，被连接的槽函数会自动被回调。这就类似观察者模式：当发生了感兴趣的事件，某一个操作就会被自动触发。（这里提一句，Qt 的信号槽使用了额外的处理来实现，并不是 GoF 经典的观察者模式的实现方式。）</p>
<p>信号和槽是Qt特有的信息传输机制，是Qt设计程序的重要基础，它可以让互不干扰的对象建立一种联系。</p>
<p>槽的本质是类的成员函数，其参数可以是任意类型的。和普通C++成员函数几乎没有区别，它可以是虚函数；也可以被重载；可以是公有的、保护的、私有的、也可以被其他C++成员函数调用。唯一区别的是：槽可以与信号连接在一起，每当和槽连接的信号被发射的时候，就会调用这个槽。</p>
<h3 id="自定义槽"><a href="#自定义槽" class="headerlink" title="自定义槽"></a>自定义槽</h3><ol>
<li><p>QT5：任意的成员函数，普通全局函数，静态函数</p>
</li>
<li><p>槽函数需要与信号一致（参数类型和参数个数一致）</p>
</li>
<li><p>由于信号都是没有返回值，所以，槽函数一定没有返回值</p>
</li>
</ol>
<hr>
<h2 id="额外知识点"><a href="#额外知识点" class="headerlink" title="额外知识点"></a>额外知识点</h2><ul>
<li><p>emit：意为发送，主要用于发送信号</p>
</li>
<li><p>signals：</p>
<ol>
<li><p>信号必须有signals关键字来声明</p>
</li>
<li><p>信号没有返回值，但可以有参数</p>
</li>
<li><p>信号就是函数的声明，只需声明，无需定义</p>
</li>
<li><p>使用：emit mySignal();</p>
</li>
</ol>
</li>
<li><p>在发送带参数的命令时，字符串包含中文的话，如果报错，请参照<a href="https://youchen12138.github.io/2019/06/25/QT%E4%B8%AD%E6%8F%90%E7%A4%BA%E2%80%9C%E5%B8%B8%E9%87%8F%E4%B8%AD%E6%9C%89%E6%8D%A2%E8%A1%8C%E7%AC%A6%E2%80%9D%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95/" target="_blank" rel="noopener">QT中提示“常量中h有换行符”解决办法 </a>一文</p>
</li>
<li><p>重载信号用函数指针</p>
</li>
</ul>
<p>例如</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">void (SubWidget::*funSignal)()=&amp;SubWidget::mySignal;</span><br><span class="line">void (SubWidget::*testSignal)(int, QString)=&amp;SubWidget::mySignal;</span><br><span class="line">connect(&amp;subWin, funSignal, this, &amp;MainWidget::dealSub);</span><br><span class="line">connect(&amp;subWin, testSignal, this, &amp;MainWidget::dealSolt);</span><br></pre></td></tr></table></figure>

<ul>
<li>打印由Unicode编码转中文</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">//str.toUtf8() -&gt; 字节数组QByteArray</span><br><span class="line">//...data() -&gt; QByteArray -&gt; char *</span><br><span class="line">qDebug()&lt;&lt;a&lt;&lt;str.toUtf8().data();</span><br><span class="line">//高版本可以直接用第二种方式</span><br><span class="line"></span><br><span class="line">//高版本QT可以直接打印中文</span><br><span class="line">qDebug()&lt;&lt;a&lt;&lt;str;</span><br></pre></td></tr></table></figure>

<ul>
<li><p>Lambda表达式: </p>
<ol>
<li><p>匿名函数对象</p>
</li>
<li><p>C++11增加的新特性，项目文件：CONFIG += C++11</p>
</li>
<li><p>QT配合信号一起使用</p>
<p>例如</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">int a=10, b=100;</span><br><span class="line">connect(b4, &amp;QPushButton::released,</span><br><span class="line">        // = :把外部局部变量、类中所有成员以值传递方式</span><br><span class="line">        // this: 类中所有成员以值传递方式</span><br><span class="line">        // &amp; ：把外部所有局部变量（除类中定义的）</span><br><span class="line">        [=]() mutable   //将值传递的变量设为可改变</span><br><span class="line">        &#123;</span><br><span class="line">            b4-&gt;setText(&quot;123&quot;);</span><br><span class="line">            qDebug()&lt;&lt;&quot;1111&quot;;</span><br><span class="line">            qDebug()&lt;&lt;a&lt;&lt;b;</span><br><span class="line">            a=11;</span><br><span class="line">        &#125;</span><br><span class="line">        );</span><br></pre></td></tr></table></figure>

</li>
</ol>
</li>
</ul>
<h3 id="内存回收机制"><a href="#内存回收机制" class="headerlink" title="内存回收机制"></a>内存回收机制</h3><ul>
<li><p>1）指定父对象后  2）直接或间接继承于QObject</p>
</li>
<li><p>子对象如果是动态分配空间的new，不需要手动释放delete</p>
</li>
<li><p>系统会自动释放</p>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/06/24/QT信号与槽及其附属知识点-md/" data-id="ck4r400rk007tl0w0m12d15sf" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/QT/">QT</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-hello-world" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/06/23/hello-world/" class="article-date">
  <time datetime="2019-06-23T12:20:47.578Z" itemprop="datePublished">2019-06-23</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/06/23/hello-world/">Hello World</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure>

<p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="noopener">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>

<p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure>

<p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>

<p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/06/23/hello-world/" data-id="ck4r400sv00ael0w0h3rz5t7q" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  


  <nav id="page-nav">
    
    <a class="extend prev" rel="prev" href="/page/9/">&laquo; Prev</a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/8/">8</a><a class="page-number" href="/page/9/">9</a><span class="page-number current">10</span><a class="page-number" href="/page/11/">11</a><a class="page-number" href="/page/12/">12</a><a class="extend next" rel="next" href="/page/11/">Next &raquo;</a>
  </nav>

</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Ajax/">Ajax</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS/">CSS</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS3/">CSS3</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Dart/">Dart</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Flutter/">Flutter</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Git/">Git</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTML/">HTML</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTML5/">HTML5</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JSON/">JSON</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java/">Java</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/QT/">QT</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/React/">React</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Sass/">Sass</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/TheKnowledgeOf/">TheKnowledgeOf</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/TypeScript/">TypeScript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/bootstrap/">bootstrap</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/jQuery/">jQuery</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Ajax/">Ajax</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS3/">CSS3</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Dart/">Dart</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Flutter/">Flutter</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Git/">Git</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML/">HTML</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML5/">HTML5</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JSON/">JSON</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Java/">Java</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript/">JavaScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Javascript/">Javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/QT/">QT</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Sass/">Sass</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TheKnowledgeOf/">TheKnowledgeOf</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TypeScript/">TypeScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bootstrap/">bootstrap</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jQuery/">jQuery</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Ajax/" style="font-size: 12.22px;">Ajax</a> <a href="/tags/CSS/" style="font-size: 18.89px;">CSS</a> <a href="/tags/CSS3/" style="font-size: 17.78px;">CSS3</a> <a href="/tags/Dart/" style="font-size: 14.44px;">Dart</a> <a href="/tags/Flutter/" style="font-size: 16.67px;">Flutter</a> <a href="/tags/Git/" style="font-size: 12.22px;">Git</a> <a href="/tags/HTML/" style="font-size: 14.44px;">HTML</a> <a href="/tags/HTML5/" style="font-size: 12.22px;">HTML5</a> <a href="/tags/JSON/" style="font-size: 10px;">JSON</a> <a href="/tags/Java/" style="font-size: 11.11px;">Java</a> <a href="/tags/JavaScript/" style="font-size: 20px;">JavaScript</a> <a href="/tags/Javascript/" style="font-size: 10px;">Javascript</a> <a href="/tags/QT/" style="font-size: 12.22px;">QT</a> <a href="/tags/React/" style="font-size: 15.56px;">React</a> <a href="/tags/Sass/" style="font-size: 11.11px;">Sass</a> <a href="/tags/TheKnowledgeOf/" style="font-size: 11.11px;">TheKnowledgeOf</a> <a href="/tags/TypeScript/" style="font-size: 10px;">TypeScript</a> <a href="/tags/bootstrap/" style="font-size: 11.11px;">bootstrap</a> <a href="/tags/jQuery/" style="font-size: 13.33px;">jQuery</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/12/">December 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">November 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">October 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/09/">September 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/08/">August 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">July 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">June 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/05/">May 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/04/">April 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/03/">March 2019</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2019/12/29/Flutter-MaterialApp常用属性介绍/">Flutter-MaterialApp常用属性介绍</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-ListView/">Flutter-ListView</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-AppBar/">Flutter-AppBar</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-TabBar/">Flutter-TabBar</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-按钮/">Flutter-按钮</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2019 John Doe<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



  </div>
</body>
</html>